<template>
  <div>
    <!-- 搜索框 -->
    <div id="mine">
      <form action="/">
        <van-search
          v-model="value"
          shape="round"
          background="#ee0a24"
          placeholder="搜索订单"
          @search="onSearch"
          @cancel="onCancel"
          show-action
        >
          <template v-slot:left>
            <van-icon
              @click="backToUser"
              class="icon-left"
              name="arrow-left"
              size="1rem"
              color="white"
            />
          </template>
          <template v-slot:action>
            <van-icon
              class="icon-left"
              name="weapp-nav"
              size="1rem"
              color="white"
            />
          </template>
        </van-search>
      </form>
    </div>
    <!--Tab标签  订单商品 -->
    <van-tabs id="goods" v-model="active">
      <van-tab title="全部">
        <!--    数量        原件              现价          描述信息         主题                     图片地址  -->
        <van-card
          v-for="(item, i) of orderlist1"
          :key="i"
          :num="item.count"
          :price="item.gprice"
          :desc="item.details"
          :title="item.gtitle"
          :thumb="`${baseURL}/jd_card/goods/${item.gpic}`"
        >
          <template #tags>
            <van-tag plain type="danger">七天无理由退货</van-tag>
          </template>
          <template #footer>
            <van-button
              v-show="item.status == 2 || item.status == 3"
              size="mini"
              style="font-size: 15px"
              >延长收货</van-button
            >
            <van-button
              v-show="item.status == 3"
              size="mini"
              style="font-size: 15px"
              >查看物流</van-button
            >
            <van-button
              v-show="item.status == 2 || item.status == 3"
              size="mini"
              style="font-size: 15px; border: 1px solid red"
              >确定收货</van-button
            >
            <van-button
              v-show="item.status == 4"
              size="mini"
              disabled
              style="font-size: 15px"
              >已签收</van-button
            >
          </template>
        </van-card>
      </van-tab>
      <van-tab title="待付款">
        <van-card
          v-for="(item, i) of orderlist2"
          :key="i"
          :num="item.count"
          :price="item.gprice"
          :desc="item.details"
          :title="item.gtitle"
          :thumb="`${baseURL}/jd_card/goods/${item.gpic}`"
        >
        <template #footer>
            <van-button size="mini" style="font-size: 15px"
              >去付款</van-button
            >
          </template>
          <template #tags>
            <van-tag plain type="danger">七天无理由退货</van-tag>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="待发货">
        <van-card
          v-for="(item, i) of orderlist3"
          :key="i"
          :num="item.count"
          :price="item.gprice"
          :desc="item.details"
          :title="item.gtitle"
          :thumb="`${baseURL}/jd_card/goods/${item.gpic}`"
        >
          <template #tags>
            <van-tag plain type="danger">七天无理由退货</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" style="font-size: 15px"
              >延长收货</van-button
            >
            <van-button size="mini" style="font-size: 15px"
              >查看物流</van-button
            >
            <van-button
              size="mini"
              style="font-size: 15px; border: 1px solid red"
              >确定收货</van-button
            >
          </template>
        </van-card>
      </van-tab>
      <van-tab title="待收货">
        <van-card
          v-for="(item, i) of orderlist4"
          :key="i"
          :num="item.count"
          :price="item.gprice"
          :desc="item.details"
          :title="item.gtitle"
          :thumb="`${baseURL}/jd_card/goods/${item.gpic}`"
        >
          <template #tags>
            <van-tag plain type="danger">七天无理由退货</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" style="font-size: 15px"
              >延长收货</van-button
            >
            <van-button size="mini" style="font-size: 15px"
              >查看物流</van-button
            >
            <van-button
              size="mini"
              style="font-size: 15px; border: 1px solid red"
              >确定收货</van-button
            >
          </template>
        </van-card>
      </van-tab>
      <van-tab title="售后">
        <van-card
         v-for="(item, i) of orderlist5"
          :key="i"
          :num="item.count"
          :price="item.gprice"
          :desc="item.details"
          :title="item.gtitle"
          :thumb="`${baseURL}/jd_card/goods/${item.gpic}`"
        >
          <template #tags>
            <van-tag plain type="danger">七天无理由退货</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" style="font-size: 15px"
              >去评价吧</van-button
            >
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Post } from "../gp.js";

export default {
  props:['id'],
  data() {
    return {
      active: 0,
      value: "",
      arr: [],
      orderlist1: [],
      orderlist2: [],
      orderlist3: [],
      orderlist4: [],
      orderlist5: [],
    };
  },
  mounted() {
    let data = {};
    data.user_id = 1;
    Post("/order", data).then((result) => {
      console.log(result.data.data);
      if (result.data.code == 200) {
        let data = result.data.data;
        data.forEach((item, i) => {
          console.log(item);
          this.orderlist1.push(data[i]);
          switch (item.status) {
            case 2:
              this.orderlist2.push(data[i]);
              break;
            case 3:
              this.orderlist3.push(data[i]);
              break;
            case 4:
              this.orderlist4.push(data[i]);
              break;
            case 5:
              this.orderlist5.push(data[i]);
              break;
          }
          console.log(this.orderlist1);
        });
      } else {
        alert("请稍后重试~");
      }
    });
    this.active=Number(this.id);
  },
  methods: {
    onSearch(val) {
      // Toast(val);
      // 调用查询方法  封装axios查询商品数据
      ggds(val).then((result) => {
        this.arr = result;
        console.log(result);
      });
    },
    onCancel() {
      Toast("取消");
    },
    backToUser() {
      this.$router.push("/user");
    },
  },
};
</script>

<style scoped>
.van-card {
  margin-top: 10px;
  margin-bottom: 12px;
  background-color: rgb(250, 250, 250);
  border-radius: 10px;
   box-shadow: 0 3px 6px 0 rgba(206, 204, 204, 0.2),0 -3px 6px 0 rgba(206, 204, 204, 0.2);
}
.van-search__content {
  margin: 0 10px;
}
.van-button {
  margin-top: 1vh;
  margin-right: 3vw;
  height: 4vh;
  width: 25vw;
  border-radius: 20px;
}
.goods {
  margin-top: 10px;
}
#goods .van-card__thumb img {
  border-radius: 15px;
}
.van-tag--danger{
  margin-top: 8px;
}
</style>
</style>